<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<script src="lib/vue.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="lib/element-ui.js" type="text/javascript" charset="utf-8"></script>
	<script src="lib/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="lib/jquery.md5.js" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" type="text/css" href="lib/element-ui.css"/>
	<link rel="stylesheet" type="text/css" href="css/index.css"/>
	<title>在线考核平台</title>
</head>
<body>
<div id="app">
	<header>
		<div class="header">
			<div><a href="/"><img class="img-logo" src="lib/logo1.png" alt=""></a></div>
			<div class="plane-login">
				<div v-show="islogin==0">
					<a href="#" @click="showLoginWindow=true">登录</a> | <a href="register.html">注册</a>
				</div>
				<div v-show="islogin==1">
					<el-menu :default-active="menuActiveIndex" class="el-menu-demo" mode="horizontal">
						<el-submenu index="2">
							<template slot="title"><img
									src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" alt=""
									class="nav-avatar" style="font-weight: bold">{{loginInfo.username}}
							</template>
							<el-menu-item index="2-1" v-show="1==loginInfo.role"><a href="" >用户管理</a></el-menu-item>
<!--							<el-menu-item index="2-2">设置</el-menu-item>-->
							<el-menu-item index="2-3" @click="exit">退出登录</el-menu-item>
						</el-submenu>
					</el-menu>
				</div>
			</div>
		</div>
	</header>
	<main>
		<div class="plane-view-box">
			<div class="view-box view-box-red">
				<h2>题目总数</h2>
				<div class="view-box-total">{{problemNums}}</div>
			</div>
			<div class="view-box view-box-ye">
				<h2>用户总数</h2>
				<div class="view-box-total">{{userNums}}</div>
			</div>
			<div class="view-box view-box-blue">
				<h2>答案总数</h2>
				<div class="view-box-total">{{answerNums}}</div>
			</div>
		</div>
		<div class="plane plane-control">
			<div class="plane-note">
				<p>系统开放注册中</p> ●
				<p>常用搜索功能集合</p>
			</div>
			<div class="plane-control-btn">
				<div class="box-control">
					<b><i class="el-icon-search"></i></b><a href="mailto:1728945207@qq.com"> 问题反馈</a>
				</div>
				<div class="box-control" v-show="1==loginInfo.role">
					<a href="newask.html"><b><i class="el-icon-edit"></i></b> 发布方案</a>
				</div>
			</div>
		</div>
		<div class="plane-item">
			<h2>问题列表</h2>
			<div class="ask-ltem" v-for="ask in problemList">
				<div class="ask-left">
                 <span class="ask-class"><el-tag effect="dark" hit="true" style="border: none"
                                                 size="small" :color="ask.classcolor">{{ask.problem_id}}</el-tag> </span>
					<div class="ask-title">
						<a :href="'ask.html?ask='+ask.problem_id">{{ask.problem_title}}</a>
					</div>
				</div>
				<div class="ask-right">
					<span class="ask-view"><el-tag effect="dark" type="info" size="small">{{ask.problem_date}}</el-tag> </span>
				</div>
			</div>
		</div>
		<el-pagination
				background
				layout="prev, pager, next"
				:total="pageInfo.total"
				:page-size = "pageSize"
				:current-page="pageNum"
				@current-change="pageChange">
		</el-pagination>
		<transition name="el-zoom-in-center">
			<div class="window-plane-login" v-show="showLoginWindow">
				<div class="box-mask"></div>
				<div class="box-login">
					<div class="plane-login-title">
						<div><b>登录账户</b></div>
						<div @click="closeLoginPlane"><i class="el-icon-close close"></i></div>
					</div>
					<div class="box-login-form">
						<div class="form-item">
							<el-input v-model="form.username" name="username" placeholder="账号"></el-input>
						</div>
						<div class="form-item">
							<el-input v-model="form.password" name="password" placeholder="密码" show-password></el-input>
						</div>
						<div class="form-item form-set-right">
							<a href="#">忘记密码</a> | <a href="mailto:1728945207@qq.com">无法登录</a>
						</div>
						<div class="form-item form-set-right">
							<el-button type="primary" @click="login">登录</el-button>
						</div>
					</div>
				</div>
			</div>
		</transition>
	</main>
	<footer class="fixed-bottom">
		<div class="plane-footer">
			在线考核平台 code by zcpsama
		</div>
	</footer>
	<script>
        var vue = new Vue({
            el: '#app',
            mounted() {
                this.init()
            },
            data: {
                pageNum:1,
                pageSize:9,
                userOb: {},
                problemNums: '0',
                userNums: '0',
                answerNums: '0',
	            pageInfo:{},
                problemList: [],
                form: {
                    username: '',
                    password: ''
                },
                menuActiveIndex: 1,
                islogin: 0,
                loginInfo:{},
                showLoginWindow: false
            },
            methods: {

                init: function () {
                    var that = this;
                    $.get('/getProblemNums', function (data) {
                        let obj = JSON.parse(data);
                        that.problemNums = obj.problemNums;
                    });
                    $.get('/getUserNums', function (data) {
                        let obj = JSON.parse(data);
                        that.userNums = obj.userNums;
                    });
                    $.get('/getAnswerNums', function (data) {
                        let obj = JSON.parse(data);
                        that.answerNums = obj.answerNums;
                    });
                    $.get('/user/loginInfo', function (data) {
                        if (data != 0) {
                            that.loginInfo = JSON.parse(data);
                            that.islogin = 1;
                        }
                    });
                    // $.get('/getAllProblem', function (data) {
                    //     that.problemList = JSON.parse(data);
                    // });
                    $.get('/getProblemsByPage',{pageNum: that.pageNum,pageSize:that.pageSize}, function (data) {
                        let obj = JSON.parse(data);
                        that.pageInfo = obj;
                        that.problemList = obj.list;
                    });

                },
	            pageChange(page){
                    let that = this;
                    that.pageNum =  page;
                    $.get('/getProblemsByPage',{pageNum: that.pageNum,pageSize:that.pageSize}, function (data) {
                        let obj = JSON.parse(data);
                        that.pageInfo = obj;
                        that.pageNum = obj.pageNum;
                        that.problemList = obj.list;
                    });
	            },
                login() {
                    let that = this;
                    $.post('/login', {username: that.form.username, password: that.form.password}, function (data) {
                        that.userOb = data;
                        let msg = null;
                        if (that.userOb.code === '1') {
                            if(that.userOb.role===1){
                                msg = '管理员:'+that.userOb.username+'  '+that.userOb.msg;
                            }else {
                                msg = that.userOb.msg;
                            }
                            that.$message({type: 'success', message: msg});
                            setTimeout(function () {
                                window.location.reload();
                            }, 1000);
                        } else {
                            that.$message({type: 'error', message: that.userOb.msg});
                        }

                    }, "json");
                },
                exit() {
                    let that = this;
                    $.get('/user/logout', function (data) {
                        if (data === '1') {
                            that.$message({message: '已退出'});
                            setTimeout(function () {
                                window.location.reload();
                            }, 1000);
                        } else {
                            that.$message({type: 'error', message: '退出失败'});
                        }
                    })
                },

                closeLoginPlane() {
                    this.showLoginWindow = false;
                }
            }
        });
	</script>
</div>
</body>
</html>